'use client'

import React, { useEffect, useRef } from 'react'

const BinaryCodeTransition: React.FC = () => {
  const topRef = useRef<HTMLDivElement>(null)
  const bottomRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!topRef.current || !bottomRef.current) return
    
    const generateLetterColumns = (container: HTMLDivElement, count: number = 100) => {
      for (let i = 0; i < count; i++) {
        const letterCol = document.createElement('div')
        letterCol.className = 'letter-col'
        
     
        const duration = (2 + Math.random() * 2).toFixed(4)
        letterCol.style.animationDuration = `${duration}s`
        
        
        for (let j = 0; j < 4; j++) {
          const span = document.createElement('span')
          span.textContent = Math.random().toString(2).substr(2, 1)
          letterCol.appendChild(span)
        }
        
        container.appendChild(letterCol)
      }
    }
    
    generateLetterColumns(topRef.current)
    generateLetterColumns(bottomRef.current)
    
    return () => {
      if (topRef.current) topRef.current.innerHTML = ''
      if (bottomRef.current) bottomRef.current.innerHTML = ''
    }
  }, [])
  
  return (
    <div className="binary-code-container w-full py-4 sm:py-6 overflow-hidden relative">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <div className="line-code h-[60px] sm:h-[80px] relative">
            <div ref={topRef} className="line-code__top"></div>
            <div ref={bottomRef} className="line-code__bott"></div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default BinaryCodeTransition